<template>
  <div class="app-container">
    <!-- 整体蓝色背景框 -->
    <div class="blue-bg-frame">
      <!-- 顶部导航区域 -->
      <header class="header">
        <nav class="right-nav">
          <ul>
            <li><a href="#" class="active">采购合同信息</a></li>
          </ul>
        </nav>
      </header>
      
      <!-- 主体内容区域 -->
      <main class="content">
        <!-- 合同列表标题栏 -->
        <div class="list-header">
          <h2>合同列表</h2>
          <button class="add-btn" @click="openCreateModal">+ 新增合同</button>
        </div>
        
        <!-- 搜索和筛选区域 -->
        <div class="filter-bar">
          <div class="search-box">
            <input 
              type="text" 
              placeholder="请输入合同编号/名称/创建人搜索" 
              v-model="searchKey"
              @keyup.enter="handleSearch"
            >
            <button class="search-btn" @click="handleSearch">搜索</button>
          </div>

          <div class="filter-options">
            <select class="status-select" v-model="filterSupplier" @change="handleFilter">
              <option value="">全部供应商</option>
              <option v-for="supplier in supplierList" :key="supplier.id" :value="supplier.name">
                {{ supplier.name }}
              </option>
            </select>
            <select class="status-select" v-model="filterStatus" @change="handleFilter">
              <option value="">全部状态</option>
              <option value="10">准备（草稿）</option>
              <option value="11">驳回</option>
              <option value="15">修改中</option>
              <option value="30">待审</option>
              <option value="70">执行</option>
              <option value="80">完结</option>
            </select>
            <div class="date-filter">
              <input type="date" v-model="startDate" placeholder="生效日期开始">
              <span class="date-separator">-</span>
              <input type="date" v-model="endDate" placeholder="生效日期结束">
            </div>
          </div>
        </div>
        
        <!-- 合同列表表格 -->
        <div class="contract-table">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>合同编号</th>
                <th>合同名称</th>
                <th>供应商</th>
                <th>生效日期</th>
                <th>合同金额</th>
                <th>状态</th>
                <th>创建人</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- 合同列表渲染 -->
              <template v-if="paginatedContracts.length > 0">
                <tr 
                  v-for="(contract, index) in paginatedContracts" 
                  :key="contract.id"
                >
                  <td>{{ index + 1 }}</td>
                  <td>{{ contract.number }}</td>
                  <td>{{ contract.name }}</td>
                  <td>{{ contract.supplier }}</td>
                  <td>{{ contract.effectDate || '未设置' }}</td>
                  <td>{{ contract.amount }}</td>
                  <td>
                    <span :class="'status-tag ' + getStatusClass(contract.status)">
                      {{ getStatusText(contract.status) }}
                    </span>
                  </td>
                  <td>{{ contract.creator }}</td>
                  <td class="operation-buttons">
                    <button class="view-btn" @click="openViewModal(contract)">查看</button>
                    <button 
                      class="edit-btn" 
                      @click="openEditModal(contract)"
                      :disabled="!canEdit(contract.status)"
                    >
                      编辑
                    </button>
                    <button 
                      class="delete-btn" 
                      @click="openDeleteModal(contract.id)"
                      :disabled="!canDelete(contract.status)"
                    >
                      删除
                    </button>
                    <button class="print-btn" @click="openPrintModal(contract.id)">打印</button>
                  </td>
                </tr>
              </template>
              <!-- 无数据提示 -->
              <tr v-else>
                <td colspan="9" class="empty-tip">暂无符合条件的合同数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination" v-if="totalCount > 0">
          <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">上一页</button>
          <button 
            class="page-number" 
            v-for="page in pageList" 
            :key="page"
            :class="{ active: page === currentPage }"
            @click="currentPage = page"
          >
            {{ page }}
          </button>
          <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
          <span class="page-info">共 {{ totalCount }} 条，每页 {{ pageSize }} 条</span>
        </div>
      </main>
    </div>

    <!-- 1. 新建/编辑合同弹窗（无保存逻辑） -->
    <div class="modal" v-if="contractModalVisible">
      <div class="modal-mask" @click="closeContractModal"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ isEditMode ? '编辑合同' : '新建合同' }}</h3>
          <button class="modal-close" @click="closeContractModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="contract-form">
            <div class="form-section">
              <h4>合同基础信息</h4>
              <div class="form-row">
                <div class="form-item">
                  <label class="required">合同编号</label>
                  <input 
                    type="text" 
                    v-model="formData.number" 
                    :readonly="isEditMode"
                    placeholder="请输入唯一合同编号"
                  >
                </div>
                <div class="form-item">
                  <label class="required">合同名称</label>
                  <input 
                    type="text" 
                    v-model="formData.name" 
                    placeholder="推荐格式：{年份}{供应商简称}{主要物料}采购合同"
                  >
                </div>
                <div class="form-item">
                  <label class="required">供应商</label>
                  <select v-model="formData.supplier">
                    <option value="">请选择供应商</option>
                    <option v-for="supplier in supplierList" :key="supplier.id" :value="supplier.name">
                      {{ supplier.name }} ({{ supplier.code }})
                    </option>
                  </select>
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-item">
                  <label>生效日期</label>
                  <input type="date" v-model="formData.effectDate">
                </div>
                <div class="form-item">
                  <label>结束日期</label>
                  <input type="date" v-model="formData.endDate">
                </div>
                <div class="form-item">
                  <label>创建人</label>
                  <input type="text" v-model="formData.creator" readonly>
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-item full-width">
                  <label>合同条款</label>
                  <textarea v-model="formData.terms" rows="4" placeholder="请输入合同核心条款"></textarea>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item full-width">
                  <label>备注</label>
                  <textarea v-model="formData.remark" rows="2" placeholder="请输入补充说明（可选）"></textarea>
                </div>
              </div>
            </div>
            
            <div class="form-section">
              <h4>商品明细</h4>
              <button class="add-item-btn" @click="addProductItem">+ 添加商品</button>
              <div class="product-table">
                <table>
                  <thead>
                    <tr>
                      <th>商品名称<span class="required-mark">*</span></th>
                      <th>单位<span class="required-mark">*</span></th>
                      <th>单价(元)<span class="required-mark">*</span></th>
                      <th>数量<span class="required-mark">*</span></th>
                      <th>金额(元)</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, idx) in formData.products" :key="idx">
                      <td>
                        <select v-model="item.productName" @change="handleProductSelect(idx)">
                          <option value="">请选择商品</option>
                          <option v-for="product in productList" :key="product.id" :value="product.name">
                            {{ product.name }}
                          </option>
                        </select>
                      </td>
                      <td>
                        <input type="text" v-model="item.unit" readonly>
                      </td>
                      <td>
                        <input 
                          type="number" 
                          v-model.number="item.price" 
                          min="0" 
                          step="0.01"
                          @input="calculateItemAmount(idx)"
                        >
                      </td>
                      <td>
                        <input 
                          type="number" 
                          v-model.number="item.quantity" 
                          min="1" 
                          @input="calculateItemAmount(idx)"
                        >
                      </td>
                      <td>{{ item.amount.toFixed(2) }}</td>
                      <td>
                        <button class="delete-item-btn" @click="removeProductItem(idx)">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="total-amount">
                <span class="total-label">合同总金额：</span>
                <span class="amount-value">¥{{ calculateTotalAmount().toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="form-btn cancel-btn" @click="closeContractModal">取消</button>
          <!-- 移除保存/提交逻辑，仅保留弹窗关闭功能 -->
          <button class="form-btn save-btn" @click="closeContractModal">确认</button>
        </div>
      </div>
    </div>

    <!-- 2. 查看合同详情弹窗 -->
    <div class="modal" v-if="viewModalVisible">
      <div class="modal-mask" @click="closeViewModal"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>合同详情</h3>
          <button class="modal-close" @click="closeViewModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="contract-detail">
            <div class="detail-section">
              <h4>基础信息</h4>
              <div class="detail-row">
                <div class="detail-item">
                  <label>合同编号：</label>
                  <span>{{ viewData.number || '' }}</span>
                </div>
                <div class="detail-item">
                  <label>合同名称：</label>
                  <span>{{ viewData.name || '' }}</span>
                </div>
                <div class="detail-item">
                  <label>供应商：</label>
                  <span>{{ viewData.supplier || '' }}</span>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item">
                  <label>生效日期：</label>
                  <span>{{ viewData.effectDate || '未设置' }}</span>
                </div>
                <div class="detail-item">
                  <label>结束日期：</label>
                  <span>{{ viewData.endDate || '未设置' }}</span>
                </div>
                <div class="detail-item">
                  <label>合同状态：</label>
                  <span :class="'status-tag ' + getStatusClass(viewData.status || '')">
                    {{ getStatusText(viewData.status || '') }}
                  </span>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item full-width">
                  <label>合同条款：</label>
                  <pre>{{ viewData.terms || '无' }}</pre>
                </div>
              </div>
              <div class="detail-row">
                <div class="detail-item full-width">
                  <label>备注：</label>
                  <span>{{ viewData.remark || '无' }}</span>
                </div>
              </div>
            </div>
            
            <div class="detail-section">
              <h4>商品明细</h4>
              <div class="product-table">
                <table>
                  <thead>
                    <tr>
                      <th>商品名称</th>
                      <th>单位</th>
                      <th>单价(元)</th>
                      <th>数量</th>
                      <th>金额(元)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, idx) in (viewData.products || [])" :key="idx">
                      <td>{{ item.productName || '' }}</td>
                      <td>{{ item.unit || '' }}</td>
                      <td>{{ (item.price || 0).toFixed(2) }}</td>
                      <td>{{ item.quantity || 0 }}</td>
                      <td>{{ (item.amount || 0).toFixed(2) }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="total-amount">
                <span class="total-label">合同总金额：</span>
                <span class="amount-value">¥{{ calculateViewTotalAmount().toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="form-btn cancel-btn" @click="closeViewModal">关闭</button>
          <button class="form-btn print-btn" @click="openPrintModal(viewData.id || '')">
            打印合同
          </button>
        </div>
      </div>
    </div>

    <!-- 3. 删除确认弹窗（无实际删除逻辑） -->
    <div class="modal" v-if="deleteModalVisible">
      <div class="modal-mask" @click="closeDeleteModal"></div>
      <div class="modal-content small-modal">
        <div class="modal-header">
          <h3>确认删除</h3>
          <button class="modal-close" @click="closeDeleteModal">&times;</button>
        </div>
        <div class="modal-body">
          <p>您确定要删除该合同吗？删除后将仅在数据库保留记录（软删除），列表中不再显示。</p>
          <p class="warning">注意：仅状态为“准备（草稿）”或“驳回”的合同可删除</p>
        </div>
        <div class="modal-footer">
          <button class="form-btn cancel-btn" @click="closeDeleteModal">取消</button>
          <!-- 移除实际删除逻辑，仅关闭弹窗 -->
          <button class="form-btn delete-btn" @click="closeDeleteModal">确认删除</button>
        </div>
      </div>
    </div>

    <!-- 4. 打印确认弹窗（无实际打印逻辑） -->
    <div class="modal" v-if="printModalVisible">
      <div class="modal-mask" @click="closePrintModal"></div>
      <div class="modal-content small-modal">
        <div class="modal-header">
          <h3>打印合同</h3>
          <button class="modal-close" @click="closePrintModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="print-form">
            <div class="form-item">
              <label>选择打印模板：</label>
              <select v-model="printTemplate">
                <option value="standard">标准合同模板（A4）</option>
                <option value="simple">简洁版模板（A4）</option>
                <option value="legal">法务专用模板（A3）</option>
              </select>
            </div>
            <div class="form-item">
              <label>打印范围：</label>
              <div class="print-scope">
                <label>
                  <input type="radio" name="printScope" value="all" checked @change="printScope = 'all'"> 全部页面
                </label>
                <label>
                  <input type="radio" name="printScope" value="custom" @change="printScope = 'custom'"> 自定义页码
                </label>
                <input 
                  type="text" 
                  v-model="printPages" 
                  placeholder="如：1-3,5"
                  v-show="printScope === 'custom'"
                >
              </div>
            </div>
            <div class="form-item">
              <label>打印份数：</label>
              <input 
                type="number" 
                v-model.number="printCopies" 
                min="1" 
                max="10"
                value="1"
              >
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="form-btn cancel-btn" @click="closePrintModal">取消</button>
          <!-- 移除实际打印逻辑，仅关闭弹窗并提示 -->
          <button class="form-btn print-btn" @click="handleMockPrint">确认打印</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PurchaseContractManagement',
  data() {
    return {
      // 基础静态数据（无后端交互）
      contracts: [
        {
          id: 1,
          number: 'CG-HT-2023001',
          name: '服务器采购合同',
          supplier: '云科技有限公司',
          effectDate: '2023-05-10',
          endDate: '2024-05-09',
          amount: '¥58,000.00',
          status: '70',
          creator: '张三',
          terms: '1. 交货时间：合同签订后15个工作日内\n2. 付款方式：验收合格后30天内支付全款\n3. 质量保证：提供3年免费保修服务',
          remark: '需预装Linux操作系统',
          products: [
            { productName: '服务器', unit: '台', price: 29000, quantity: 2, amount: 58000 }
          ],
          approvals: [
            { approver: '李四（法务）', status: '同意', time: '2023-05-08', comment: '条款合规' },
            { approver: '王五（经理）', status: '同意', time: '2023-05-09', comment: '同意采购' }
          ]
        },
        {
          id: 2,
          number: 'CG-HT-2023002',
          name: '办公设备采购合同',
          supplier: '办公用品贸易公司',
          effectDate: '2023-05-15',
          endDate: '2023-11-14',
          amount: '¥12,500.00',
          status: '80',
          creator: '张三',
          terms: '1. 交货时间：合同签订后7个工作日内\n2. 付款方式：货到付款',
          remark: '',
          products: [
            { productName: '打印机', unit: '台', price: 2500, quantity: 2, amount: 5000 },
            { productName: '碎纸机', unit: '台', price: 1500, quantity: 5, amount: 7500 }
          ],
          approvals: [
            { approver: '李四（法务）', status: '同意', time: '2023-05-12', comment: '' },
            { approver: '王五（经理）', status: '同意', time: '2023-05-14', comment: '' }
          ]
        }
      ],
      supplierList: [
        { id: 1, name: '云科技有限公司', code: 'YUN-001' },
        { id: 2, name: '办公用品贸易公司', code: 'BG-002' },
        { id: 3, name: '软件开发有限公司', code: 'SOFT-003' }
      ],
      productList: [
        { id: 1, name: '服务器', unit: '台', defaultPrice: 29000 },
        { id: 2, name: '打印机', unit: '台', defaultPrice: 2500 },
        { id: 3, name: '碎纸机', unit: '台', defaultPrice: 1500 }
      ],
      
      // 筛选条件
      searchKey: '',
      filterSupplier: '',
      filterStatus: '',
      startDate: '',
      endDate: '',
      
      // 分页控制
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      totalPages: 0,
      pageList: [],
      
      // 弹窗控制
      contractModalVisible: false,
      viewModalVisible: false,
      deleteModalVisible: false,
      printModalVisible: false,
      
      // 表单数据（仅前端临时存储）
      isEditMode: false,
      formData: {
        id: '',
        number: '',
        name: '',
        supplier: '',
        effectDate: '',
        endDate: '',
        creator: '当前用户',
        terms: '',
        remark: '',
        products: [{ productName: '', unit: '', price: 0, quantity: 1, amount: 0 }]
      },
      
      // 其他前端临时数据
      viewData: {},
      deleteTargetId: '',
      printTargetId: '',
      printTemplate: 'standard',
      printScope: 'all',
      printPages: '',
      printCopies: 1
    };
  },
  computed: {
    // 筛选逻辑（仅前端数据过滤）
    filteredContracts() {
      let result = [...this.contracts];
      
      if (this.searchKey) {
        const key = this.searchKey.toLowerCase();
        result = result.filter(contract => 
          contract.number.toLowerCase().includes(key) ||
          contract.name.toLowerCase().includes(key) ||
          contract.creator.toLowerCase().includes(key)
        );
      }
      
      if (this.filterSupplier) {
        result = result.filter(contract => contract.supplier === this.filterSupplier);
      }
      
      if (this.filterStatus) {
        result = result.filter(contract => contract.status === this.filterStatus);
      }
      
      if (this.startDate) {
        result = result.filter(contract => contract.effectDate >= this.startDate);
      }
      if (this.endDate) {
        result = result.filter(contract => contract.effectDate <= this.endDate);
      }
      
      return result;
    },
    // 分页数据（仅前端切片）
    paginatedContracts() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredContracts.slice(startIndex, endIndex);
    }
  },
  methods: {
    // 更新分页信息（仅前端计算）
    updatePagination() {
      this.totalCount = this.filteredContracts.length;
      this.totalPages = Math.ceil(this.totalCount / this.pageSize);
      this.updatePageList();
    },
    
    updatePageList() {
      const pages = [];
      const maxShowPage = 5;
      let startPage = Math.max(1, this.currentPage - Math.floor(maxShowPage / 2));
      let endPage = startPage + maxShowPage - 1;
      
      if (endPage > this.totalPages) {
        endPage = this.totalPages;
        startPage = Math.max(1, endPage - maxShowPage + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      this.pageList = pages;
    },
    
    // 搜索和筛选触发（仅前端数据更新）
    handleSearch() {
      this.currentPage = 1;
      this.updatePagination();
    },
    
    handleFilter() {
      this.currentPage = 1;
      this.updatePagination();
    },
    
    // 状态文本和样式映射（纯前端逻辑）
    getStatusText(statusCode) {
      if (!statusCode) return '未知状态';
      const statusMap = {
        '10': '准备（草稿）',
        '11': '驳回',
        '15': '修改中',
        '30': '待审',
        '70': '执行',
        '80': '完结'
      };
      return statusMap[statusCode] || '未知状态';
    },
    
    getStatusClass(statusCode) {
      if (!statusCode) return 'default';
      const classMap = {
        '10': 'draft',
        '11': 'reject',
        '15': 'editing',
        '30': 'pending',
        '70': 'executing',
        '80': 'completed'
      };
      return classMap[statusCode] || 'default';
    },
    
    // 编辑/删除权限判断（纯前端逻辑）
    canEdit(statusCode) {
      return ['10', '11', '15'].includes(statusCode || '');
    },
    
    canDelete(statusCode) {
      return ['10', '11'].includes(statusCode || '');
    },
    
    // 弹窗控制方法（仅前端显示/隐藏）
    openCreateModal() {
      this.isEditMode = false;
      this.contractModalVisible = true;
      // 重置表单（仅前端临时数据）
      this.formData = {
        id: '',
        number: '',
        name: '',
        supplier: '',
        effectDate: '',
        endDate: '',
        creator: '当前用户',
        terms: '',
        remark: '',
        products: [{ productName: '', unit: '', price: 0, quantity: 1, amount: 0 }]
      };
    },
    
    openEditModal(contract) {
      this.isEditMode = true;
      this.contractModalVisible = true;
      // 复制数据到表单（仅前端临时存储）
      this.formData = {
        ...contract,
        products: JSON.parse(JSON.stringify(contract.products || []))
      };
    },
    
    closeContractModal() {
      this.contractModalVisible = false;
    },
    
    openViewModal(contract) {
      this.viewModalVisible = true;
      // 复制数据到查看面板（仅前端临时存储）
      this.viewData = {
        ...contract,
        products: contract.products || [],
        approvals: contract.approvals || []
      };
    },
    
    closeViewModal() {
      this.viewModalVisible = false;
    },
    
    openDeleteModal(contractId) {
      const contract = this.contracts.find(c => c.id === contractId);
      if (!this.canDelete(contract?.status)) {
        alert('仅状态为“准备（草稿）”或“驳回”的合同可删除');
        return;
      }
      this.deleteTargetId = contractId;
      this.deleteModalVisible = true;
    },
    
    closeDeleteModal() {
      this.deleteModalVisible = false;
    },
    
    openPrintModal(contractId) {
      this.printTargetId = contractId;
      this.printModalVisible = true;
    },
    
    closePrintModal() {
      this.printModalVisible = false;
    },
    
    // 商品明细操作（仅前端临时数据更新）
    addProductItem() {
      this.formData.products.push({
        productName: '',
        unit: '',
        price: 0,
        quantity: 1,
        amount: 0
      });
    },
    
    removeProductItem(index) {
      if ((this.formData.products || []).length <= 1) {
        alert('至少保留一条商品明细');
        return;
      }
      this.formData.products.splice(index, 1);
    },
    
    handleProductSelect(index) {
      const productName = this.formData.products[index]?.productName;
      if (!productName) return;
      const product = this.productList.find(item => item.name === productName);
      if (product) {
        this.formData.products[index].unit = product.unit;
        this.formData.products[index].price = product.defaultPrice;
        this.calculateItemAmount(index);
      }
    },
    
    calculateItemAmount(index) {
      const item = this.formData.products[index];
      item.amount = (item.price || 0) * (item.quantity || 0);
    },
    
    calculateTotalAmount() {
      return (this.formData.products || []).reduce((total, item) => total + (item.amount || 0), 0);
    },
    
    calculateViewTotalAmount() {
      return (this.viewData.products || []).reduce((total, item) => total + (item.amount || 0), 0);
    },
    
    // 模拟打印（仅前端提示，无实际操作）
    handleMockPrint() {
      alert('打印功能已触发（纯前端模拟，无实际打印操作）');
      this.closePrintModal();
    }
  },
  // 页面初始化（仅前端数据计算）
  mounted() {
    this.$nextTick(() => {
      this.updatePagination();
    });
  },
  // 监听筛选条件变化（仅前端数据更新）
  watch: {
    searchKey: 'updatePagination',
    filterSupplier: 'updatePagination',
    filterStatus: 'updatePagination',
    startDate: 'updatePagination',
    endDate: 'updatePagination',
    currentPage: 'updatePageList'
  }
};
</script>

<style scoped>
/* 样式部分完全保留，无任何修改 */
.app-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f0f5ff;
  margin: 0;
  padding: 20px 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

.blue-bg-frame {
  width: 95%;
  min-height: 80vh;
  border: 2px solid #03A9F4;
  border-radius: 15px;
  background-color: #03A9F4;
  position: relative;
  overflow: hidden;
  padding-top: 70px;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  background-color: #3dbcf7;
  box-sizing: border-box;
  z-index: 10;
}

.right-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.right-nav ul li {
  margin-left: 20px;
}

.right-nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.right-nav ul li a.active,
.right-nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.content {
  width: 100%;
  min-height: calc(100% - 70px);
  background-color: #fff;
  border-radius: 0 0 15px 15px;
  padding: 25px;
  box-sizing: border-box;
  overflow-y: auto;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.list-header h2 {
  margin: 0;
  color: #333;
  font-size: 22px;
}

.add-btn {
  background-color: #03A9F4;
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.add-btn:hover {
  background-color: #0288d1;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  gap: 16px;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 300px;
  font-size: 14px;
}

.search-btn {
  background-color: #03A9F4;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.filter-options {
  gap: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.status-select {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-filter input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.date-separator {
  color: #666;
}

.contract-table {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #333;
}

tr:hover {
  background-color: #f9f9f9;
}

.status-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.status-tag.draft {
  background-color: #8c8c8c;
}

.status-tag.pending {
  background-color: #ff9800;
}

.status-tag.reject {
  background-color: #f44336;
}

.status-tag.editing {
  background-color: #ff9800;
}

.status-tag.executing {
  background-color: #165DFF;
}

.status-tag.completed {
  background-color: #4caf50;
}

.status-tag.default {
  background-color: #999;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

.view-btn, .edit-btn, .delete-btn, .print-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.view-btn {
  background-color: #e8f0fe;
  color: #165DFF;
}

.edit-btn {
  background-color: #e8f5e9;
  color: #4caf50;
}

.delete-btn {
  background-color: #ffebee;
  color: #f44336;
}

.print-btn {
  background-color: #e6e6e6;
  color: #000;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

.page-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
}

.page-number {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-number.active {
  background-color: #03A9F4;
  color: white;
  border-color: #03A9F4;
}

.page-info {
  margin-left: 15px;
  color: #666;
  font-size: 14px;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.modal-content {
  position: relative;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1001;
}

.small-modal .modal-content {
  max-width: 500px;
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

.contract-form {
  padding: 10px 0;
}

.form-section {
  margin-bottom: 20px;
}

.form-section h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.form-item {
  flex: 1;
  min-width: 200px;
}

.form-item.full-width {
  flex: 0 0 100%;
}

.form-item label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #666;
}

.form-item .required {
  position: relative;
  padding-right: 12px;
}

.form-item .required::after {
  content: '*';
  color: #f44336;
  position: absolute;
  right: 0;
  top: 0;
}

.form-item input,
.form-item select,
.form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-item textarea {
  resize: vertical;
}

.required-mark {
  color: #f44336;
  margin-left: 2px;
}

.add-item-btn {
  background-color: #03A9F4;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 8px;
}

.delete-item-btn {
  background-color: #ffebee;
  color: #f44336;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.total-amount {
  margin-top: 12px;
  text-align: right;
  font-size: 16px;
  color: #333;
}

.total-label {
  font-weight: normal;
  margin-right: 8px;
}

.amount-value {
  font-weight: bold;
  color: #f44336;
}

.form-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 8px;
}

.cancel-btn {
  background-color: #eee;
  color: #666;
}

.save-btn {
  background-color: #03A9F4;
  color: white;
}

.submit-btn {
  background-color: #4caf50;
  color: white;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.print-btn {
  background-color: #ff9800;
  color: white;
}

.contract-detail {
  font-size: 14px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.detail-item {
  flex: 1;
  min-width: 200px;
}

.detail-item label {
  display: inline-block;
  width: 80px;
  color: #666;
  font-weight: 500;
}

.detail-item pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  color: #333;
  font-size: 14px;
  font-family: "Microsoft YaHei", sans-serif;
}

.print-form {
  padding: 10px 0;
}

.print-scope {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.print-scope label {
  cursor: pointer;
  color: #333;
}

.warning {
  color: #f44336;
  font-size: 14px;
  margin-top: 10px;
  display: block;
}
</style>